<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>NiceSchool教务系统</title>

    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>

</head>
<body>

    <div>
        <form class="layui-form" style="margin-left: -60px">
            <div class="layui-inline">
                <label class="layui-form-label">系：</label>
                <div class="layui-input-inline">
                    <select th:name="did" lay-search="" lay-verify="required1" id="required1"  lay-filter="required1">
                        <option th:value="0">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: -40px">
                <label class="layui-form-label">专业：</label>
                <div class="layui-input-inline">
                    <select th:name="mid" lay-search="" lay-verify="required2" id="required2"  lay-filter="required2">
                        <!--<option th:each="ma:${selMajor}" th:value="${ma.mid}" th:text="${ma.mname}"></option>-->
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: -40px">
                <label class="layui-form-label">年级：</label>
                <div class="layui-input-inline">
                    <select th:name="gid" lay-search="" lay-verify="required3" id="required3"  lay-filter="required3">
                        <!--<option th:each="gr:${selGrade}" th:value="${gr.gid}" th:text="${gr.gname}"></option>-->
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: -40px">
                <label class="layui-form-label">班级：</label>
                <div class="layui-input-inline">
                    <select th:name="classid" lay-search="" lay-verify="required4" id="required4"  lay-filter="required4">
                        <!--<option th:each="ca:${selCalss}" th:value="${ca.classid}" th:text="${ca.classname}"></option>-->
                    </select>
                </div>
            </div>
        </form>
        <div class="demoTable"  style="margin-top: 10px;margin-left: 15px">
            学生编号：
            <div class="layui-inline">
                <input class="layui-input" name="sid" id="demoReload" autocomplete="off">
            </div>&nbsp;&nbsp;
            学生姓名：
            <div class="layui-inline">
                <input class="layui-input" name="sid" id="demoReload1" autocomplete="off">
            </div>
        </div>
        <button class="layui-btn" type="button" id="selBtn" style="margin-left: 580px;margin-top: -53px">开始搜索</button>
        <button class="layui-btn" type="button" id="qxBtn"style="margin-top: -53px">取消搜索</button>
        <table class="layui-hide" id="demo" lay-filter="test">
        </table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="examine">查看</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">退学</a>


        </script>


    </div>

    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'jquery', 'form'], function() {
            var laydate = layui.laydate ,//日期
            laypage = layui.laypage, //分页
                layer = layui.layer, //弹层
                table = layui.table, //表格
                carousel = layui.carousel, //轮播
                upload = layui.upload, //上传
                element = layui.element, //元素操作
                slider = layui.slider,//滑块
                form = layui.form;
                element.on('tab(demo)', function(data){
                    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                        tips: 1
                    });
                });

                if(1==1){
                    layui.$.ajax({
                        type : 'post',
                        url : "selDepartment",
                        dataType:'json',
                        success : function(result) {
                            var data = result.data;
                            $.each(data, function (index, obj) {
                                layui.$("#required1").append("<option value='"+obj.did+"'>"+obj.dname+"</option>");
                            });
                            form.render('select');
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            layui.layer.msg(XMLHttpRequest.responseText);
                        }
                    });
                }
            //  监听系部下拉框 根据所选系部查询专业
            form.on('select(required1)', function(data){
                if(data.value==0){
                    layui.$('#required2').html("");
                    layui.$('#required3').html("");
                    layui.$('#required4').html("");
                    form.render();
                }
                //  若系部下拉框值不等于0
                else{
                    //  移除专业下拉框所有值
                    $("#required2").html("");
                    $("#required3").html("");
                    $("#required4").html("");
                    layui.$.ajax({
                        type : 'post',
                        url : "selectdid",
                        data : {
                            'did' : data.value
                        },
                        dataType:'json',
                        success : function(result) {
                            var data = result.data;
                            $.each(data, function (index, obj) {
                                layui.$("#required2").append("<option value='" + obj.mid + "'>" + obj.mname + "</option>");
                            });
                            form.render('select');
                            //  监听专业
                            var required2 = $("#required2").val();
                            $("#required3").find("option").remove();
                            $("#required4").find("option").remove();
                            if(required2!=0){
                                layui.$.ajax({
                                    type : 'post',
                                    url : "selectmid",
                                    data : {
                                        'mid' : required2
                                    },
                                    dataType:'json',
                                    success : function(result) {
                                        var data = result.data;
                                        $.each(data, function (index, obj) {
                                                layui.$("#required3").append("<option value='"+obj.gid+"'>"+obj.gname+"</option>");

                                        });
                                        form.render('select');
                                        //  监听年级
                                        var required3 = $("#required3").val();
                                        $("#required4").find("option").remove();
                                        if(required3!=null){
                                            layui.$.ajax({
                                                type : 'post',
                                                url : "selectgid",
                                                data : {
                                                    'gid' : required3
                                                },
                                                dataType:'json',
                                                success : function(result) {
                                                    var data = result.data;
                                                    $.each(data, function (index, obj) {
                                                        layui.$("#required4").append("<option value='"+obj.classid+"'>"+obj.classname+"</option>");
                                                    });
                                                    form.render('select');
                                                },
                                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                                    layui.layer.msg(XMLHttpRequest.responseText);
                                                }
                                            });
                                        }
                                    },
                                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                                        layui.layer.msg(XMLHttpRequest.responseText);
                                    }
                                });
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            layui.layer.msg(XMLHttpRequest.responseText);
                        }
                    });
                }
            });

            //  监听专业下拉框 根据所选系部查询专业
            form.on('select(required2)', function(data){
                //  移除专业下拉框所有值
                $("#required3").find("option").remove();
                $("#required4").find("option").remove();
                //  若系部下拉框值不等于0
                if(data.value!=0){
                    layui.$.ajax({
                        type : 'post',
                        url : "selectmid",
                        data : {
                            'mid' : data.value
                        },
                        dataType:'json',
                        success : function(result) {
                            var data = result.data;
                            $.each(data, function (index, obj) {
                                layui.$("#required3").append("<option value='"+obj.gid+"'>"+obj.gname+"</option>");
                            });
                            form.render('select');
                            //  监听年级
                            var required3 = $("#required3").val();
                            $("#required4").find("option").remove();
                            if(required3!=null){
                                layui.$.ajax({
                                    type : 'post',
                                    url : "selectgid",
                                    data : {
                                        'gid' : required3
                                    },
                                    dataType:'json',
                                    success : function(result) {
                                        var data = result.data;
                                        $.each(data, function (index, obj) {
                                            layui.$("#required4").append("<option value='"+obj.classid+"'>"+obj.classname+"</option>");
                                        });
                                        form.render('select');
                                    },
                                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                                        layui.layer.msg(XMLHttpRequest.responseText);
                                    }
                                });
                            }

                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            layui.layer.msg(XMLHttpRequest.responseText);
                        }
                    });
                }
            });
            //  监听年级下拉框 根据所选年级查询班级
            form.on('select(required3)', function(data){
                //  移除专业下拉框所有值
                $("#required4").find("option").remove();
                //  若系部下拉框值不等于0
                if(data.value!=0){
                    layui.$.ajax({
                        type : 'post',
                        url : "selectgid",
                        data : {
                            'gid' : data.value
                        },
                        dataType:'json',
                        success : function(result) {
                            var data = result.data;
                            $.each(data, function (index, obj) {
                                layui.$("#required4").append("<option value='"+obj.classid+"'>"+obj.classname+"</option>");
                            });
                            form.render('select');
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            layui.layer.msg(XMLHttpRequest.responseText);
                        }
                    });
                }
            });
            table.render({
                elem: '#demo',
                height: 520,
                url: 'selStudent', //数据接口
                title: '用户表',
                page: true //开启分页
                ,limits:[5,10,15],
                cols: [
                    [ //表头
                        //{field: "sid", title: '学生编号'},
                        {field: "stuid", title: '学号'},
                        {field: "sname", title: '姓名'},
                        {field: "sgender", title: '性别'},
                        // {field: "sbirthday", title: '出生日期',templet:"<div>{{layui.util.toDateString(d.sbirthday, 'yyyy年MM月dd日')}}</div>"},
                        //{field: "pname", title: '政治面貌'},
                        //{field: "snation", title: '民族'},
                        //{field: "scardid", title: '身份证号'},
                        //{field: "sphone", title: '手机号'},
                        //{field: "saddress", title: '地址'},
                        {field: "stustate", title: '状态'},
                        {field: "classname", title: '班级'},
                        {fixed: 'right',title:'操作', width: 165, align:'center', toolbar: '#barDemo'}
                    ]]
                , id: 'selStudent',
                done: function (res, curr, count) {
                    $("[data-field='stustate']").children().each(function () {
                        if ($(this).text() == 0) {
                            $(this).text("注册学籍")
                        }
                        if($(this).text() == 1){
                            $(this).text("保留学籍")
                        }
                        if($(this).text() == 2){
                            $(this).text("已离校")
                        }
                    });
                }
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        //添加
                        layer.open({
                            type:2,      //layer的5种层类型   0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
                            title: ['新增', 'font-size:18px;'],  //弹出框标题
                            area: ['800px','350px'],    //设置弹框的大小
                            shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                            anim: 2,              //弹出动画
                            content:'add'     //写方法的路径  进入页面  此处也和easyui相同
                        })
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            // layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                            //修改
                            layer.open({
                                type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                                title: ['修改数据', 'font-size:18px;'],  //弹出框标题
                                shade: [0.5, '#393D49'],     //遮罩层
                                shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                                area: ['580px', '500px'],    //弹出框大小
                                anim: 1,              //弹出动画
                                content:'selStudentId?id='+checkStatus.data[0].sid
                            });
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            //删除
                            layer.confirm('真的要删除吗？', function () {
                                $.post("delete",{'id':checkStatus.data[0].id},function(result)
                                    {
                                        layer.msg(
                                            result.msg, {
                                                icon: 1,
                                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                            }, function(){
                                                //刷新父页面
                                                parent.window.location.reload();
                                            });
                                    }
                                );
                            });
                        }
                        break;
                };
            });
            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                //修改
                if(layEvent === 'edit'){
                    top.layer.open({
                        type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        title: ['修改学生信息', 'font-size:18px;'],  //弹出框标题
                        shade: [0.5, '#393D49'],     //遮罩层
                        shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                        area: ['580px', '500px'],   //弹出框大小
                        anim: 1,              //弹出动画
                        content:'selStudentId?id='+data.sid
                    });
                }
                //查看详情
                if(layEvent === 'examine'){
                    top.layer.open({
                        type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        title: ['学生信息', 'font-size:18px;'],  //弹出框标题
                        shade: [0.5, '#393D49'],     //遮罩层
                        shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                        area: ['800px', '500px'],   //弹出框大小
                        anim: 1,              //弹出动画
                        content:'selectMessage?id='+data.sid,
                    });
                }


                if(layEvent == 'del'){
                    top.layer.open({
                        type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        title: ['退学', 'font-size:18px;'],  //弹出框标题
                        shade: [0.5, '#393D49'],     //遮罩层
                        shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                        area: ['600px', '400px'],   //弹出框大小
                        anim: 1,              //弹出动画
                        content:'insertDropout?stuid='+data.stuid+"&sname="+data.sname
                    });
                }
                // //  删除学生
                // if(layEvent == 'del'){
                //     //删除
                //     layer.confirm('确定要对该学生执行退学措施吗？', function () {
                //         $.post("delStudent",{'stuid':data.stuid},function(result)
                //             {
                //                 layer.msg(
                //                     result.msg, {
                //                         icon: 1,
                //                         time: 1000 //2秒关闭（如果不配置，默认是3秒）
                //                     }, function(){
                //                         obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                //                         layer.close(index);
                //                     });
                //             }
                //         );
                //     });
                // }


            });


            //分页
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 100 //总页数
                ,skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });

            /*条件查询按钮*/
            //  根据学生姓名查询
            var $ = layui.$;
            $('#selBtn').on('click', function(){
                //获取输入框
                var did = $('#required1');
                var mid = $('#required2');
                var gid = $('#required3');
                var classid = $('#required4');
                var stuid = $('#demoReload');
                var sname = $('#demoReload1');
                //执行重载
                table.reload('selStudent', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        did: did.val(),
                        mid: mid.val(),
                        gid: gid.val(),
                        classid: classid.val(),
                        stuid: stuid.val(),
                        sname: sname.val()
                    }
                });
            });

          //    取消查询
            var $ = layui.$;
            $('#qxBtn').on('click', function(){
                window.location.reload();
            });

        });
    </script>

</body>
</html>
